<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/mystyle.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <div class="header">
    </div>
    <div class="navigation">
        <div class="center nav_content">
            <a href="#" class="current">首页</a>
            <a href="#">咨询</a>
            <a href="#">测评</a>
            <a href="#">商城</a>
            <div class="location">
                <i class="icon"></i>
                <span class="text first">深圳</span>
                <span class="text">切换</span>
            </div>
            <div class="person">
                <span class="icon"></span>
                <span class="adm"><a href="https://sinclaircoder.gitee.io/h5-0608-personal-center-iframe/">个人中心</a></span>
                <!-- <span class="adm">个人中心</span> -->
                
            </div>
        </div>
    </div>
    <div class="selection-nav">
        <span>首页</span>
        <span>></span>
        <span>预防装修污染</span>
        <span>></span>
        <span>材料库</span>
    </div>
    <div class="selection-menu">
        <ul>
            <li>
                <span class="catalog-type"><a href="#">类别</a></span>
                <span class="catalog-content"><a href="#">全部</a></span>
                <span class="catalog-content"><a href="#">地板</a></span>
                <span class="catalog-content"><a href="#">涂料</a></span>
                <span class="catalog-content"><a href="#">墙纸</a></span>
                <span class="catalog-content"><a href="#">瓷砖</a></span>
                <span class="catalog-content"><a href="#">粘胶剂</a></span>
                <span class="catalog-content"><a href="#">油漆</a></span>
                <span class="catalog-content"><a href="#">家具</a></span>
                <span class="catalog-content"><a href="#">板材</a></span>
                <span class="catalog-content"><a href="#">饰品</a></span>
                <span class="indexSelect-png"><img src="./images/indexSelect.png" alt=""></span>
            </li>
            <li>
                <span class="catalog-type"><a href="#">类型</a></span>
                <span class="catalog-content"><a href="#">全部</a></span>
            </li>
            <li>
                <span class="catalog-type"><a href="#">材质</a></span>
                <span class="catalog-content"><a href="#">全部</a></span>
                <span class="catalog-content"><a href="#">实木</a></span>
                <span class="catalog-content"><a href="#">复合</a></span>
                <span class="catalog-content"><a href="#">强化</a></span>
                <span class="catalog-content"><a href="#">其他</a></span>
            </li>
            <li>
                <span class="catalog-type"><a href="#">品牌</a></span>
                <span class="catalog-content"><a href="#">全部</a></span>
                <span class="catalog-content"><a href="#">圣象</a></span>
                <span class="catalog-content"><a href="#">大自然</a></span>
                <span class="catalog-content"><a href="#">生活家</a></span>
                <span class="catalog-content"><a href="#">北美枫情</a></span>
                <span class="catalog-content"><a href="#">德尔</a></span>
                <span class="catalog-content"><a href="#">博典</a></span>
                <span class="catalog-content"><a href="#">船王</a></span>

            </li>
        </ul>
    </div>
    <div class="selection-search">
        <div class="selection-sort">
            <span>
                发布时间
                <img src="images/downicon.png" alt="down">
            </span>
            <span>
                价格
                <img src="images/upicon.png" alt="up">
            </span>

            <span>
                环保节能
                <img src="images/upicon.png" alt="up">
            </span>
        </div>
        <div class="search-div">
            <form action="">
                <input type="text" class="search-text" id="search">
                <button class="search-icon">
                    <img src="images/search.png" alt="">
                    <!-- <span>搜索</span> -->
                </button>
            </form>
        </div>
        <div class="anyquestion">
            <span>
                <img src="images/wenhao.png" alt="" class="icon-center">
                <a href="#">了解家居医生建材环保评级标准</a>
            </span>
        </div>
    </div>
    <div class="content-list">
        <div class="content-row">
            <div class="content-col">
                <img src="images/data_image.png" alt="">
                <p>  <span class="blod">德尔</span> &nbsp;&nbsp;&nbsp; <span>都市系列3001</span></p>
                <p>木地板 &nbsp;-&nbsp; 复合地板</p>
                <p>单价: &nbsp;128元/m²</p>
                <p class="rank">环保评级: B (可以使用)</p>
            </div>
            <div class="content-col">
                <img src="images/data_image.png" alt="">
                <p>  <span class="blod">德尔</span> &nbsp;&nbsp;&nbsp; <span>都市系列3001</span></p>
                <p>木地板 &nbsp;-&nbsp; 复合地板</p>
                <p>单价: &nbsp;128元/m²</p>
                <p class="rank">环保评级: B (可以使用)</p>
            </div>
            <div class="content-col">
                <img src="images/data_image.png" alt="">
                <p>  <span class="blod">德尔</span> &nbsp;&nbsp;&nbsp; <span>都市系列3001</span></p>
                <p>木地板 &nbsp;-&nbsp; 复合地板</p>
                <p>单价: &nbsp;128元/m²</p>
                <p class="rank">环保评级: B (可以使用)</p>
            </div>
            <div class="content-col">
                <img src="images/data_image.png" alt="">
                <p>  <span class="blod">德尔</span> &nbsp;&nbsp;&nbsp; <span>都市系列3001</span></p>
                <p>木地板 &nbsp;-&nbsp; 复合地板</p>
                <p>单价: &nbsp;128元/m²</p>
                <p class="rank">环保评级: B (可以使用)</p>
            </div>
            
        </div>
        <div class="content-row">
            <div class="content-col">
                <img src="images/data_image.png" alt="">
                <p>  <span class="blod">德尔</span> &nbsp;&nbsp;&nbsp; <span>都市系列3001</span></p>
                <p>木地板 &nbsp;-&nbsp; 复合地板</p>
                <p>单价: &nbsp;128元/m²</p>
                <p class="rank">环保评级: B (可以使用)</p>
            </div>
            <div class="content-col">
                <img src="images/data_image.png" alt="">
                <p>  <span class="blod">德尔</span> &nbsp;&nbsp;&nbsp; <span>都市系列3001</span></p>
                <p>木地板 &nbsp;-&nbsp; 复合地板</p>
                <p>单价: &nbsp;128元/m²</p>
                <p class="rank">环保评级: B (可以使用)</p>
            </div>
            <div class="content-col">
                <img src="images/data_image.png" alt="">
                <p>  <span class="blod">德尔</span> &nbsp;&nbsp;&nbsp; <span>都市系列3001</span></p>
                <p>木地板 &nbsp;-&nbsp; 复合地板</p>
                <p>单价: &nbsp;128元/m²</p>
                <p class="rank">环保评级: B (可以使用)</p>
            </div>
            <div class="content-col">
                <img src="images/data_image.png" alt="">
                <p>  <span class="blod">德尔</span> &nbsp;&nbsp;&nbsp; <span>都市系列3001</span></p>
                <p>木地板 &nbsp;-&nbsp; 复合地板</p>
                <p>单价: &nbsp;128元/m²</p>
                <p class="rank">环保评级: B (可以使用)</p>
            </div>
            
        </div>
        <div class="pager">
            <button>上一页</button>
            <span><a href="#">1</a></span>
            <span><a href="#">2</a></span>
            <span><a href="#">3</a></span>
            <span><a href="#">4</a></span>
            <span><a href="#">5</a></span>
            <button>下一页</button>
            <span>共有10页，去第&nbsp;<input type="text" class="input-page">&nbsp;页</span>
            <button class="confirm">确定</button>
        </div>
    </div>
    <div class="code-verify">
        <div class="binary-code">
            <img src="images/small_weixin.png" alt="">
        </div>
        <div class="code-text">
            <p class="code-title">建材检测 需求反馈</p>
            <p class="code-text-content">亲爱的用户，我们正在不断的完善和更新建材库,</p>
            <p class="code-text-content">若没有找到您想要的材料信息，请将您想测的建材告诉我们。</p>
        </div>
    </div>
    <div class="footer">
        <div class="footer-content">
            <div class="fonter-logo">
                <img src="./images/footerLogo.png">
                <p class="highlight">为室内环境健康把好每一关</p>
                <p>家居医生致力于中国人的家居健康问题，通过专业的技术研究<br>
                和测评，倾力协助大众打造绿色、环保的人居生活环境。
                </p>
            </div>
            <div class="fonter-social">
                <div class="footer-col">
                    <a href="#">关于我们</a>
                    <a href="#">版权说明</a>
                    <img src="images/weixin2.png">
                    <a href="#" class="bottom-link">官方微信</a>
                </div>
                <div class="footer-col">
                    <a href="#">联系我们</a>
                    <a href="#">用户隐私</a>
                    <img src="images/tianmao.png">
                    <a href="#" class="bottom-link">天猫旗舰店</a>
                </div>
                <div class="footer-col">
                    <a href="#">加入我们</a>
                    <a href="#">免责说明</a>
                    <img src="images/shop.png">
                    <a href="#" class="bottom-link">有赞商城</a>
                </div>
            </div>
            <hr>
            <div class="copyright">
                <p class="copyright-left">深圳建筑科学研究院股份有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家居医生网</p>
                    <p class="copyright-right">粤ICP备08011321号 ©Copyright All Rights Reserved</p>
            </div>
        </div>
    </div>
    <script>
        var links = $(".nav_content a");
        for(var i=0;i<links.length;i++)
            links[i].index=i;
        
        links.click(function(){
            $(".nav_content").find("a").removeClass("current");
            $(this).addClass("current");
        });
    </script>
</body>
</html>
